import React from 'react';
import ReactDOM from 'react-dom';
import QRCode from 'qrcode.react';
import mirror, {actions, connect} from 'mirrorx';
import { Button } from 'antd-mobile';

class App extends React.Component { 
	constructor(props) {
		super(props);
        this.state = {
            data: {},
            showSuccess: false
        }
	}

	componentDidMount(){
        // 二维码页面
         this.timer = setInterval(()=>{
            this.request()
        }, 2000)
    }
   
    handleBack = () => {
        actions.routing.go(-1);
    }

    handleScan = () => {
        const Lang = window.LangMessage ||{};
        T.fetch({
            method: 'get',
            url:`/facilitator/service/custCsmeService.json?orderNo=${T.urlQuery('orderNo')}&recordsKey=${T.urlQuery('recordsKey')}`,
        }).then((res)=>{
            if(res.success){
                T.showSuccess(Lang.scan_success || '扫码成功');
            }
        })
    }

    // 查询是否扫码消费成功
    request = () => {
        T.fetch({
            url:'/facilitator/service/getConsumptionNotice.json',
            data: {
                orderNo: T.urlQuery('orderNo'),
                recordsKey: T.urlQuery('recordsKey')
            },
        }).then((res)=>{
            if(res.success){
                if(res.value.computeResult != '0'){
                    this.setState({
                        data: res.value,
                        showSuccess: res.success
                    })
                }
            }
        })
    }
    
    componentWillUnmount(){
        clearInterval(this.timer);
    }

	render() {
        const {data, showSuccess} = this.state;
        const Lang = window.LangMessage ||{};
        if(showSuccess){
            clearInterval(this.timer);
        }
		return (
            <div className="qrcode">
                <h1 className="tac f44 lh15">{T.urlQuery('serviceName')}</h1>
                {
                    showSuccess ? (<div>
                        <div className="success-wrap">
                            <img src="/assets/images/success.png" />
                        </div>
                        <div className="f36 tac mt20">
                            {Lang.consume_success || '消费成功'}
                        </div>
                        <div className="mt30 fc9 f30 tac">
                            {`${Lang.remainder || '剩余次数'}：${data.numbers}`}
                        </div>
                    </div>) : (<div className="tac mt30">
                        <QRCode value={`${window.location.origin}/ajax/facilitator/service/custCsmeService.json?orderNo=${T.urlQuery('orderNo')}&recordsKey=${T.urlQuery('recordsKey')}`} size={200} />
                    </div>)
                }
                <div className="tac mt30">
                    <Button style={{"marginRight":"60px",display:showSuccess?"none":"inline-block"}} inline size="large" type="primary" onClick={this.handleScan}>{Lang.scan || '扫一扫'}</Button>
                    <Button inline size="large" type="primary" onClick={this.handleBack}>{Lang.return || '返回'}</Button>
                </div>
            </div>
        )
	}
}

export default App;